<template>
  <div class="s-canvas" @click="clickCanvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>
<script>
  export default {
    name: 'VerificateCode',
    props: {
      fontSizeMin: { // 字体最小值
        type: Number,
        default: 25
      },
      fontSizeMax: { // 字体最大值
        type: Number,
        default: 30
      },
      backgroundColorMin: { // 最小背景值
        type: Number,
        default: 255
      },
      backgroundColorMax: { // 最大背景值
        type: Number,
        default: 255
      },
      colorMin: { // 最小色值
        type: Number,
        default: 0
      },
      colorMax: { // 最大色值
        type: Number,
        default: 160
      },
      lineColorMin: { // 最小线色
        type: Number,
        default: 100
      },
      lineColorMax: { // 最大线色
        type: Number,
        default: 255
      },
      dotColorMin: { // 最小点色
        type: Number,
        default: 0
      },
      dotColorMax: { // 最大点色
        type: Number,
        default: 255
      },
      contentWidth: { // 宽
        type: Number,
        default: 112
      },
      contentHeight: { // 高
        type: Number,
        default: 31
      }
    },
    data() {
      return {
        signList: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'q', 'Q', 'w', 'W', 'e', 'E', 'r',
          'R', 't', 'T', 'y', 'Y', 'u', 'U', 'i', 'I', 'o', 'O', 'p', 'P', 'l', 'L', 'K', 'k', 'j', 'J',
          'h', 'H', 'g', 'G', 'f', 'F', 'D', 'd', 's', 'S', 'a', 'A', 'z', 'Z', 'X', 'x', 'c', 'C', 'V', 'v',
          'b',' B', 'N', 'n', 'M', 'm'],
        num: 4,
        identifyCode: '1234'
      }
    },
    methods: {
      clickCanvas() {
        this.drawPic()
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 生成一个随机的颜色
      randomColor(min, max) {
        let r = this.randomNum(min, max);
        let g = this.randomNum(min, max);
        let b = this.randomNum(min, max);
        return 'rgb(' + r + ',' + g + ',' + b + ')'
      },
      getText() {
        let identifyCode = '';
        let maxLen = this.signList.length;
        for (let i = 0; i < this.num; i++) {
          identifyCode += (this.signList[Math.floor(Math.random() * maxLen)]);
        }
        this.$emit('on-change', identifyCode);
        return identifyCode;
      },
      drawPic() {
        let canvas = document.getElementById('s-canvas');
        let ctx = canvas.getContext('2d');
        ctx.textBaseline = 'bottom';
        ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax);
        ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
        this.identifyCode = this.getText();
        for (let i = 0; i < this.identifyCode.length; i++) {
          this.drawText(ctx, this.identifyCode[i], i)
        }
        this.drawLine(ctx);
        this.drawDot(ctx);
      },
      drawText(ctx, txt, i) {
        ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);
        ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei';
        let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
        let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
        let deg = this.randomNum(-45, 45);
        ctx.translate(x, y);
        ctx.rotate(deg * Math.PI / 180);
        ctx.fillText(txt, 0, 0);
        ctx.rotate(-deg * Math.PI / 180);
        ctx.translate(-x, -y)
      },
      drawLine(ctx) {
        // 绘制干扰线
        for (let i = 0; i < 5; i++) {
          ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax);
          ctx.beginPath();
          ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight));
          ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight));
          ctx.stroke()
        }
      },
      drawDot(ctx) {
        // 绘制干扰点
        for (let i = 0; i < 80; i++) {
          ctx.fillStyle = this.randomColor(0, 255);
          ctx.beginPath();
          ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI);
          ctx.fill()
        }
      }
    },
    mounted() {
      this.drawPic()
    }
  }
</script>
<style scoped>
  .s-canvas {
    height: 35px;
    border: 1px solid #bebebe;
  }
  .s-canvas canvas{
    margin-top: 1px;
  }
</style>
